<template>
    <view class="page">
        <view class="shop-title">{{shopInfo.branch_shop_name}}</view>
        <view class="order-main">
            <view class="order-list">
                <view class="order-info" v-if="table_code">
                    <view class="area-table">
                        <view class="area">区域：{{hotelArea}}</view>
                        <view class="table-code">桌号：{{table_code}}</view>
                    </view>
                </view>
                <view class="order-desc">
                    <view class="goods-list-main" v-for="(item,index) in cartData" :key="index">
                        <view class="goods-list">
                            <view class="image">
                                <image :src="item.image"></image>
                            </view>
                            <view class="goods-info">
                                <view class="title"><text selectable="true">{{item.title}}</text></view>
                                <view class="info-text">x{{item.amount}}</view>
                                <view class="info-text">￥{{item.price}}</view>
                                <template>
                                    <view class="info-text" v-if="item.is_meal=='0' && item.pack_price>0">包装费：￥{{item.pack_price}}</view>
                                    <view class="is-meal">是否套餐：{{item.is_meal=='1'?'是':'否'}}</view>
                                </template>
                            </view>
                        </view>
                        <!--如果是套餐，显示套餐里菜品的明细-->
                        <view class="meal-items" v-if="item.is_meal=='1'">
                            <view class="item-list" v-for="(item2,index2) in item.meal_items" :key="index2">
                                <view class="item">
                                    <view>- <text selectable="true">{{item2.title}}</text></view>
                                    <view>x{{item2.amount}}</view>
                                    <view>￥{{item2.price}}</view>
                                </view>
                                <view v-if="item2.pack_price>0">包装费：￥{{item2.pack_price}}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-row">
                    <view class="order-col-1">
                        <view>是否打包</view>
                    </view>
                    <view class="order-col-2">
                        <switch :disabled="isDisablePack" color="#E30019" :checked="isPack" @change="changePack" />
                    </view>
                </view>
                <view class="price-status">
                    <view class="price">包装费：￥{{packTotal}}，总价：￥{{total}}</view>
                </view>
            </view>
            <view class="remarks">
                备注：<br/>
                <view class="content">
                    <textarea placeholder="比如：xxx不加辣" v-model="remarks" />
                </view>
            </view>
        </view>
        <view class="pay-wrap">
            <view class="price">￥{{total}}</view>
            <cover-view class="pay" @click="goPay()">去支付</cover-view>
        </view>
    </view>
</template>

<script>
    import {mapActions,mapState,mapMutations,mapGetters} from "vuex";
    export default {
        name: "order-index",
        data(){
            return {
                table_code:"",
                isDisablePack:false, //是否禁用打包按钮
                remarks:""//备注
            }
        },
        onLoad(opts){
            //分店的id
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            //桌号
            this.table_code=opts.table_code?opts.table_code:"";
            //检测会员token验证
            this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                this.getShopInfo({branch_shop_id:this.branch_shop_id});
                this.getHotelArea({branch_shop_id:this.branch_shop_id,table_code:this.table_code});
                if(this.cartData.length<=0){
                    this.showCartData({branch_shop_id:this.branch_shop_id,table_code:this.table_code})
                }
                this.isDisablePack=this.table_code?false:true;
                this.SET_PACK({isPack:this.table_code?false:true})
            });
        },
        methods:{
            ...mapActions({
                getShopInfo:"business/getShopInfo",//获取商家信息
                getHotelArea:"business/getHotelArea",//获取饭店区域
                showCartData:"cart/showCartData",//显示购物车里的菜品
                addOrder:"order/addOrder",//提交订单
                wechatUnifiedOrder:"order/wechatUnifiedOrder"//微信小程序统一下单接口
            }),
            ...mapMutations({
                SET_PACK:"cart/SET_PACK"//设置是否自提
            }),
            //是否打包
            changePack(e){
                this.SET_PACK({isPack:e.detail.value})
            },
            //去付款
            goPay(){
                //配送方式
                let distributionType=this.isDisablePack?'2':'0';//2:自提，0:堂内
                //提交订单
                this.addOrder({
                    branch_shop_id:this.branch_shop_id,
                    table_code:this.table_code,
                    remarks:this.remarks,
					is_balance:1,
                    is_pack:this.isPack?'1':'0',//是否打包，1：是，0：否
                    distribution_type:distributionType,
                    complete:async (res)=>{
                        let ordernum="";//订单编号
                        let trueTotal=0;//真实付款金额
                        if(res.code==200){
                            ordernum=res.data.ordernum;
                            trueTotal=res.data.true_total;
                          
							uni.navigateTo({ url: '/user_pages/order/pay_success?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'' });
							
                        }else{
                            uni.showToast({
                                title: res.data,
                                icon: 'none',
                                duration:2000
                            })
                        }
                    }
                })
            }
        },
        computed:{
            ...mapState({
                shopInfo:state=>state.business.shopInfo,//商家信息
                hotelArea:state=>state.business.hotelArea, //饭店区域
                cartData:state=>state.cart.cartData,//购物车里的数据
                isPack:state=>state.cart.isPack,//是否打包
                openid:state=>state.user.openid
            }),
            ...mapGetters({
                total:"cart/total",//菜品总价格
                packTotal:"cart/packTotal"//包装费总价格
            })
        }
    }
</script>

<style scoped>
    .page{width:100%;min-height:100vh;background-color:#FFFFFF;overflow:hidden;margin-bottom:160rpx;}
    .shop-title{width:100%;height:80rpx;background-color:#FFFFFF;border-bottom: 1px solid #EFEFEF;font-size:28rpx;text-align:center;line-height:80rpx;}
    .order-main{width:100%;}
    .order-main .order-list{width:100%;border-bottom:1px solid #f17f1f;}
    .order-main .order-list .order-info{width:100%;border-bottom: 1px solid #EFEFEF;box-sizing: border-box;padding:20rpx;}
    .order-main .order-list .area-table{width:100%;display:flex;font-size:28rpx;margin-top:20rpx;}
    .order-main .order-list .area-table .area{margin-right:40rpx;}

    .order-main .order-desc{width:100%;}
    .order-main .goods-list-main{width:100%;box-sizing: border-box;padding:20rpx;border-bottom: 1px solid #EFEFEF;}
    .order-main .order-desc .goods-list{width:100%;display:flex;justify-content: space-between;align-items: center;}
    .order-main .order-desc .goods-list .image{width:120rpx;height:120rpx;}
    .order-main .order-desc .goods-list .image image{width:100%;height:100%;border-radius: 5px;}
    .order-main .order-desc .goods-list .goods-info{width:80%;height:auto;font-size:28rpx;overflow:hidden;}
    .order-main .order-desc .goods-list .goods-info .title{width:100%;height:45rpx;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
    .order-main .order-desc .goods-list .goods-info .info-text{width:auto;height:auto;color:#909090;margin-bottom:10rpx;}
    .order-main .order-desc .goods-list .goods-info .is-meal{width:auto;height:auto;color:#909090;}
    .order-main .order-desc .meal-items{width:100%;margin-top:20rpx;}
    .order-main .order-desc .meal-items .item-list{width:100%;height:80rpx;display:flex;justify-content: space-between;align-items: center;font-size:28rpx;color:#909090}
    .order-main .order-desc .meal-items .item-list .item{display:flex;}
    .order-main .order-desc .meal-items .item-list .item view{margin-right:20rpx;}
    .order-main .order-desc .meal-items .item-list .refund-btn{width:auto;height:auto;padding:8rpx 15rpx;color:#FFFFFF;font-size:28rpx;background-color:#007aff;border-radius: 4px;}
    .order-main .order-list .price-status{width:100%;height:auto;box-sizing: border-box;padding:20rpx;display:flex;justify-content: flex-end;align-items: center;}
    .order-main .order-list .price-status .price{font-size:28rpx;color:#333333}

    .order-main .order-row{width:100%;height:auto;border-bottom: 1px solid #EFEFEF;justify-content: space-between;align-items: center;display:flex;box-sizing: border-box;padding:20rpx 20rpx;}
    .order-main .order-row .order-col-1{font-size:28rpx;display:flex;}
    .order-main .order-row .order-col-2{display:flex;font-size:28rpx;color:#909090;height:40rpx;align-items: center;}
    .order-main .order-row .order-col-2.active{color:#000000}
    .order-main .order-row .radio-style{transform:scale(.8)}
    .order-main .order-row .order-col-2 label{margin-left:30rpx;}

    .order-main .remarks{font-size:28rpx;width:100%;margin-top:20rpx;box-sizing: border-box;padding:0px 20rpx;}
    .order-main .remarks .content{width:100%;height:300rpx;overflow:hidden;margin-top:20rpx;border-radius: 5px;border:1px solid #EFEFEF;}
    .order-main .remarks .content textarea{width:100%;height:100%;padding:20rpx;}
    .order-main .remarks .address{width:100%;height:70rpx;overflow:hidden;margin-top:20rpx;border-radius: 5px;border:1px solid #EFEFEF;box-sizing: border-box;color:#717171;padding:13rpx;}

    .pay-wrap{width:90%;height:110rpx;background-color:#000000;position: fixed;bottom:10rpx;left:50%;transform: translateX(-50%);display:flex;z-index:10;}
    .pay-wrap .price{font-size:40rpx;color:#FFFFFF;width:auto;box-sizing: border-box;background-color:#000000;position: absolute;z-index:10;left:10%;top:25rpx;}
    .pay-wrap .pay{width:190rpx;height:100%;background-color:#f17f1f;text-align:center;line-height:110rpx;font-size:40rpx;color:#FFFFFF;position: fixed;z-index:10;right:0%;bottom:0rpx;}
</style>
